<template>
  <div class="project-setting-view">
    <p class="project-setting-title">
      {{ $t("form.setting.recoverySettingLabel") }}
      <span class="small-font-size ml20 text-secondary-color">{{ $t("form.setting.customFormCollection") }}</span>
    </p>
    <el-divider />
    <el-form
      ref="writeSettingFormRef"
      :model="settingConf"
      :rules="settingRules"
      label-position="left"
      @validate="handleFormValidate"
    >
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.onePageOneQuestion") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.enableOnePageOneQuestionDescription')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.onePageOneQuestion.enableOnePageOneQuestion"
          @change="saveSettingHandle"
        />
      </div>
      <div v-if="settingConf?.onePageOneQuestion?.enableOnePageOneQuestion">
        <div class="setting-item">
          <p class="label">
            {{ $t("form.setting.shortestStayTime") }}
            <el-tooltip
              class="item"
              :content="$t('form.setting.shortestStayTimeDescription')"
              effect="dark"
              placement="top-start"
            >
              <el-icon>
                <ele-QuestionFilled />
              </el-icon>
            </el-tooltip>
          </p>
          <el-switch
            v-model="settingConf.onePageOneQuestion.enableShortestStay"
            @change="saveSettingHandle"
          />
        </div>
        <div
          class="sub-row-box"
          v-if="settingConf.onePageOneQuestion.enableShortestStay"
        >
          <el-input-number
            size="small"
            controls-position="right"
            @change="saveSettingHandle"
            v-model="settingConf.onePageOneQuestion.shortestStayTime"
          />
          {{ $t("form.setting.second") }}
        </div>
        <div class="setting-item">
          <p class="label">
            {{ $t("form.setting.longestStayTime") }}

            <el-tooltip
              class="item"
              :content="$t('form.setting.longestStayTimeDescription')"
              effect="dark"
              placement="top-start"
            >
              <el-icon>
                <ele-QuestionFilled />
              </el-icon>
            </el-tooltip>
          </p>
          <el-switch
            v-model="settingConf.onePageOneQuestion.enableLongestStay"
            @change="saveSettingHandle"
          />
        </div>
        <div
          class="sub-row-box"
          v-if="settingConf.onePageOneQuestion.enableLongestStay"
        >
          <el-input-number
            size="small"
            @change="saveSettingHandle"
            controls-position="right"
            v-model="settingConf.onePageOneQuestion.longestStayTime"
          />
          {{ $t("form.setting.second") }}
        </div>
        <div class="setting-item">
          <p class="label">
            {{ $t("form.setting.autoNextPage") }}
            <el-tooltip
              class="item"
              :content="$t('form.setting.autoNextPageDescription')"
              effect="dark"
              placement="top-start"
            >
              <el-icon>
                <ele-QuestionFilled />
              </el-icon>
            </el-tooltip>
          </p>
          <el-switch
            v-model="settingConf.onePageOneQuestion.autoNext"
            @change="saveSettingHandle"
          />
        </div>
      </div>

      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.autoSaveUnsubmittedData") }}

          <el-tooltip
            class="item"
            :content="$t('form.setting.autoSaveUnsubmittedDataDescription')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.saveNotSubmitStatus"
          @change="saveSettingHandle"
        />
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.fillWithLastSubmittedData") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.fillWithLastSubmittedDataDescription')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.saveSubmitStatus"
          @change="saveSettingHandle"
        />
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.enableProgressBarLabel") }}
        </p>
        <el-switch
          v-model="settingConf.enableProgress"
          @change="saveSettingHandle"
        />
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.againSubmitBtn") }}
        </p>
        <el-switch
          v-model="settingConf.enableAgainWrite"
          @change="saveSettingHandle"
        />
      </div>
      <el-divider>{{ $t("form.setting.fillingRestrictions") }}</el-divider>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.passwordWrite") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.passwordWriteDescription')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.passwordWriteStatus"
          @change="saveSettingHandle"
        />
      </div>
      <div v-if="settingConf.passwordWriteStatus">
        <el-form-item
          :rules="[
            {
              required: true,
              message: $t('form.setting.enterPwd'),

              trigger: 'blur'
            }
          ]"
          prop="writePassword"
        >
          <el-input
            v-model="settingConf.writePassword"
            @change="saveSettingHandle"
            :placeholder="$t('form.setting.enterPwd')"
            show-password
          />
        </el-form-item>
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.whiteList") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.whiteListDescription')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.enableWhiteList"
          @change="saveSettingHandle"
        />
      </div>
      <div
        v-if="settingConf.enableWhiteList"
        class="sub-row-box"
      >
        <el-select
          class="select-width"
          v-model="settingConf.whiteListType"
          @change="saveSettingHandle()"
          size="default"
        >
          <el-option
            v-for="d in whileListTypes"
            :key="d.value"
            :label="d.label"
            :value="d.value"
          >
            {{ d.label }}
          </el-option>
        </el-select>
        <el-button
          bg
          icon="ele-Setting"
          size="small"
          text
          type="primary"
          @click="handleOpenWhiteList"
        >
          {{ $t("form.setting.set") }}
        </el-button>
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.onlyAllowLoginWrite") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.onlyAllowLoginWriteDescription')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.mustLogin"
          @change="saveSettingHandle"
        />
      </div>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.wxWriteCountLimit") }}</p>
        <el-switch
          v-model="settingConf.wxWriteCountLimitStatus"
          @change="handleWxWriteCountLimitStatusChange"
        />
      </div>
      <div v-if="settingConf.wxWriteCountLimitStatus">
        <el-row>
          <el-col :span="6">
            <el-select
              size="default"
              v-model="settingConf.wxWriteCountLimitDateType"
              @change="saveSettingHandle"
            >
              <el-option
                v-for="d in dateRangeList"
                :key="d.value"
                :label="d.label"
                :value="d.value"
              >
                {{ d.label }}
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            {{ $t("form.setting.wxWriteCountLimitDescription") }}
            <el-input-number
              size="default"
              v-model="settingConf.wxWriteCountLimit"
              :min="1"
              @change="saveSettingHandle()"
            />
            {{ $t("form.setting.order") }}
          </el-col>
        </el-row>
        <el-form-item
          v-if="settingConf.wxWriteCountLimitStatus"
          :rules="[
            {
              required: settingConf.wxWriteCountLimitStatus,
              message: $t('form.setting.enterTips'),
              trigger: 'blur'
            }
          ]"
          prop="wxWriteCountLimitText"
        >
          <el-input
            size="default"
            v-model="settingConf.wxWriteCountLimitText"
            class="mt10"
            @change="saveSettingHandle()"
            :placeholder="$t('form.setting.wxWriteCountLimitText')"
          />
        </el-form-item>
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.ipWriteCountLimit") }}
          <el-tooltip
            :content="$t('form.setting.ipWriteCountLimitDescription')"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.ipWriteCountLimitStatus"
          @change="saveSettingHandle()"
        />
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.ipWriteLocationRange") }}
        </p>
        <el-switch
          v-model="settingConf.ipWriteLocationRangeStatus"
          @change="saveSettingHandle()"
        />
      </div>
      <div
        class="setting-item"
        v-if="settingConf.ipWriteLocationRangeStatus"
      >
        <el-cascader
          v-model="settingConf.ipWriteLocationRange"
          :options="provinceAndCityData"
          :props="{
            label: 'label',
            value: 'label',
            children: 'children',
            multiple: true
          }"
          collapse-tags
          size="default"
          style="width: 75%"
          clearable
          @change="saveSettingHandle()"
        />
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.accountWriteCountLimit") }}
          <el-tooltip
            :content="$t('form.setting.accountWriteCountLimitDescription')"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.accountWriteCountLimitStatus"
          @change="saveSettingHandle()"
        />
      </div>
      <div v-if="settingConf.accountWriteCountLimitStatus">
        <el-row>
          <el-col :span="6">
            <el-select
              size="default"
              v-model="settingConf.accountWriteCountLimitDateType"
              @change="saveSettingHandle()"
            >
              <el-option
                v-for="d in dateRangeList"
                :key="d.value"
                :label="d.label"
                :value="d.value"
              >
                {{ d.label }}
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            {{ $t("form.setting.wxWriteCountLimitDescription") }}
            <el-input-number
              size="default"
              v-model="settingConf.accountWriteCountLimit"
              :min="1"
              @change="saveSettingHandle()"
            />
            {{ $t("form.setting.order") }}
          </el-col>
        </el-row>
        <el-form-item
          :rules="[{ required: true, message: $t('form.setting.enterTips'), trigger: 'blur' }]"
          prop="accountWriteCountLimitText"
        >
          <el-input
            size="default"
            v-model="settingConf.accountWriteCountLimitText"
            @change="saveSettingHandle()"
            class="mt10"
            :placeholder="$t('form.setting.accountWriteCountLimitText')"
          />
        </el-form-item>
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.deviceWriteCountLimit") }}
          <el-tooltip
            :content="$t('form.setting.deviceWriteCountLimitDescription')"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.deviceWriteCountLimitStatus"
          @change="saveSettingHandle()"
        />
      </div>
      <div v-if="settingConf.deviceWriteCountLimitStatus">
        <el-row>
          <el-col :span="10">
            {{ $t("form.setting.wxWriteCountLimitDescription") }}
            <el-input-number
              size="default"
              v-model="settingConf.deviceWriteCountLimit"
              :min="1"
              @change="saveSettingHandle()"
            />
            {{ $t("form.setting.order") }}
          </el-col>
        </el-row>
        <el-form-item
          :rules="[{ required: true, message: $t('form.setting.enterTips'), trigger: 'blur' }]"
          prop="deviceWriteCountLimitText"
        >
          <el-input
            size="default"
            v-model="settingConf.deviceWriteCountLimitText"
            class="mt10"
            @change="saveSettingHandle()"
            :placeholder="$t('form.setting.deviceWriteCountLimitText')"
          />
        </el-form-item>
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.setTotalWriteCountLimit") }}
          <el-tooltip
            :content="$t('form.setting.setTotalWriteCountLimitDescription')"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.totalWriteCountLimitStatus"
          @change="saveSettingHandle()"
        />
      </div>
      <div v-if="settingConf.totalWriteCountLimitStatus">
        <el-row>
          <el-col :span="6">
            <el-select
              size="default"
              v-model="settingConf.totalWriteCountLimitDateType"
              @change="saveSettingHandle()"
            >
              <el-option
                v-for="d in dateRangeList"
                :key="d.value"
                :label="d.label"
                :value="d.value"
              >
                {{ d.label }}
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            {{ $t("form.setting.wxWriteCountLimitDescription") }}
            <el-input-number
              size="default"
              v-model="settingConf.totalWriteCountLimit"
              :min="1"
              @change="saveSettingHandle()"
            />
            {{ $t("form.setting.order") }}
          </el-col>
        </el-row>
        <el-form-item
          :rules="[{ required: true, message: $t('form.setting.enterTips'), trigger: 'blur' }]"
          prop="totalWriteCountLimitText"
        >
          <el-input
            size="default"
            v-model="settingConf.totalWriteCountLimitText"
            class="mt10"
            @change="saveSettingHandle()"
            :placeholder="$t('form.setting.setTotalWriteCountLimitText')"
          />
        </el-form-item>
      </div>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.interviewTimeRestriction") }}
          <el-tooltip
            :content="$t('form.setting.interviewTimeRestrictionDescription')"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.writeInterviewTimeStatus"
          @change="saveSettingHandle()"
        />
      </div>
      <div v-if="settingConf.writeInterviewTimeStatus">
        <el-row>
          <el-col :span="5">
            <el-checkbox
              v-model="settingConf.writeInterviewDayTimeStatus"
              @change="saveSettingHandle()"
            >
              {{ $t("form.setting.limitDailyAccessTime") }}
            </el-checkbox>
          </el-col>
        </el-row>
        <div v-if="settingConf.writeInterviewDayTimeStatus">
          <el-row class="mt10">
            <el-col :span="13">
              <el-date-picker
                v-model="settingConf.writeInterviewDateRange"
                :end-placeholder="$t('formgen.reserveTimeRange.endTime')"
                range-separator="-"
                :start-placeholder="$t('formgen.reserveTimeRange.startTime')"
                type="daterange"
                value-format="YYYY-MM-DD"
                @change="saveSettingHandle()"
              />
            </el-col>
          </el-row>
          <el-row class="mt10">
            <el-col :span="13">
              <el-time-picker
                v-model="settingConf.writeInterviewTimeRange"
                :end-placeholder="$t('formgen.reserveTimeRange.endTime')"
                is-range
                :placeholder="$t('form.setting.selectTimeRange')"
                range-separator="-"
                :start-placeholder="$t('formgen.reserveTimeRange.startTime')"
                value-format="HH:mm:ss"
                @change="saveSettingHandle()"
              />
            </el-col>
          </el-row>
        </div>

        <el-row
          v-else
          class="mt10"
        >
          <el-col :span="12">
            <el-date-picker
              size="default"
              v-model="settingConf.writeInterviewDateTimeRange"
              :end-placeholder="$t('formgen.reserveTimeRange.endTime')"
              range-separator="-"
              :start-placeholder="$t('formgen.reserveTimeRange.startTime')"
              type="datetimerange"
              @change="saveSettingHandle()"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-col>
        </el-row>
        <div class="checkbox-group mt10">
          <el-checkbox-group
            v-model="settingConf.writeInterviewTimeWhichDays"
            @change="saveSettingHandle()"
            size="small"
          >
            <el-checkbox label="2">{{ $t("formgen.reserveTimeRange.monday") }}</el-checkbox>
            <el-checkbox label="3">{{ $t("formgen.reserveTimeRange.tuesday") }}</el-checkbox>
            <el-checkbox label="4">{{ $t("formgen.reserveTimeRange.wednesday") }}</el-checkbox>
            <el-checkbox label="5">{{ $t("formgen.reserveTimeRange.thursday") }}</el-checkbox>
            <el-checkbox label="6">{{ $t("formgen.reserveTimeRange.friday") }}</el-checkbox>
            <el-checkbox label="7">{{ $t("formgen.reserveTimeRange.saturday") }}</el-checkbox>
            <el-checkbox label="1">{{ $t("formgen.reserveTimeRange.sunday2") }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-form-item
          :rules="[{ required: true, message: $t('form.setting.enterTips'), trigger: 'blur' }]"
          prop="writeInterviewTimeText"
        >
          <el-input
            size="default"
            v-model="settingConf.writeInterviewTimeText"
            @change="saveSettingHandle()"
            class="mt10"
            :placeholder="$t('form.setting.selectTimeRangeDesc')"
          />
        </el-form-item>
      </div>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.anonymousWrite") }}</p>
        <el-switch
          v-model="settingConf.anonymousWrite"
          @change="saveSettingHandle()"
        />
      </div>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.onlyInWeChat") }}</p>
        <el-switch
          v-model="settingConf.onlyWxWrite"
          @change="
            val => {
              if (!settingConf.onlyWxWrite && !val) {
                settingConf.recordWxUser = false;
              }
              saveSettingHandle();
            }
          "
        />
      </div>
      <el-divider>{{ $t("form.setting.info") }}</el-divider>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.recordWeChatUserInfo") }}</p>
        <el-switch
          v-model="settingConf.recordWxUser"
          @change="
            val => {
              if (!settingConf.onlyWxWrite && val) {
                settingConf.onlyWxWrite = true;
              }
              saveSettingHandle();
            }
          "
        />
      </div>
      <el-row>
        <p class="project-setting-sub-label">{{ $t("form.setting.recordWeChatUserInfoDescription") }}</p>
      </el-row>
    </el-form>
    <el-dialog
      v-model="whiteListDialogVisible"
      :title="$t('form.setting.whiteList')"
      class="whiteList-dialog"
      fullscreen
      lock-scroll
      destroy-on-close
    >
      <AnswerWhiteListSetting
        ref="answerWhiteListSetting"
        :form-key="formKey"
        :type="settingConf.whiteListType"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="WriteSetting">
import { ref } from "vue";
import { useRoute } from "vue-router";
import AnswerWhiteListSetting from "@/views/form/setting/components/AnswerWhiteListSetting.vue";
import { i18n } from "@/i18n";
import { provinceAndCityData } from "@/views/formgen/components/FormItem/ProvinceCity/data.ts";

const dateRangeList = [
  { value: 1, label: i18n.global.t("form.setting.count") },
  { value: 2, label: i18n.global.t("form.setting.byDay") },
  { value: 3, label: i18n.global.t("form.setting.byWeek") },
  { value: 4, label: i18n.global.t("form.setting.byMonth") }
];

const whileListTypes = [
  { value: 1, label: i18n.global.t("form.setting.email") },
  { value: 2, label: i18n.global.t("form.setting.phoneNumber") },
  { value: 3, label: i18n.global.t("form.setting.whiteList") }
];

const settingRules = {};

const formKey = useRoute().query.key as string;

const writeSettingFormRef = ref<any>(null);

const whiteListDialogVisible = ref<boolean>(false);

const props = defineProps({
  settingConf: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update"]);

const saveSettingHandle = () => {
  // 开关后需要等到下一个tick再进行验证 不然rule还没销毁掉
  setTimeout(() => {
    writeSettingFormRef.value.validate((valid: boolean) => {
      if (valid) {
        emit("update", props.settingConf);
      } else {
        console.log(valid);
      }
    });
  }, 200);
};

const handleOpenWhiteList = () => {
  whiteListDialogVisible.value = true;
};

const handleFormValidate = (prop, isValid, message) => {
  console.log(prop);
  console.log(isValid);
  console.log(message);
};

const handleWxWriteCountLimitStatusChange = () => {
  props.settingConf.recordWxUser = true;
  props.settingConf.onlyWxWrite = true;
  saveSettingHandle();
};
</script>

<style lang="scss" scoped>
@import "settting";

.checkbox-group .el-checkbox {
  margin-right: 23px;
}

:deep(.whiteList-dialog) {
  .el-dialog__body {
    padding: 0 !important;
    height: 100%;
    overflow: hidden;
  }

  overflow: hidden;
}
</style>
